<template>
	<div class="has-bottom ">
		<div ref="info">
			<!-- 商品头部 -->
			<productHead :list="Data.imgList" :imgUrl="ThumbnailUrl410" :video-url="VideoUrl" :scroll-top="scrollTop"
				@changeDetail="changeDetail" @clickLeft="clickLeft" />


			<div class="bg-white">
				<div class="sectitle">
					<div class="secprice pt-18">
						<div class="price color-white">
							<span class="fs-24">￥</span>
							<span class="fs-44 fw-b mr-5">{{ ProductInfo.Price }}</span>
							<span class="fs-28 originprice" v-if="ProductInfo.OriginalPrice !== 0">￥{{ ProductInfo.OriginalPrice
							}}</span>
						</div>
						<div class="progress">
							<van-progress :show-pivot="false" :percentage="speed" stroke-width="8" class="w-110 mr-10" color="#FFC86B"
								track-color="#FFECE9" />
							已秒{{ speed }}%
						</div>
					</div>
					<div class="secclock"><img src="../../assets/images/seckill_clock.png" /></div>
					<div class="sectime">
						<img src="../../assets/images/seckill_title.png" />
						<div v-if="showPayTime" class="fs-28 color-white mt-10">还剩{{ remainder }}</div>
						<div v-if="showStartTime" class="fs-28 color-white mt-10">距开抢{{ remainder }}</div>
					</div>
				</div>
				<div class="pd-24">
					<div class="pos-r mh-30">
						<div class=" specall mt-10" v-for="(item, index) in ProductInfo.TagList" :key="index">
							<div class="spec ">{{ item.Name }}</div>
						</div>
						<!--<svg-icon icon-class="like" class="like color-shadow" :class="isFavorite === 1?'color-primary':''" @goPage="changeFavState" />-->
					</div>
					<div class="pos-r">
						<h2 class="text-show-line-2 fs-32 mt-20 pr-100">
							{{ ProductInfo.ProductName }}
						</h2>
						<span class="share-btn" @click="share">
							<img src="../../assets/images/seckill_share.png" />
							分享
						</span>
					</div>

					<div class="fs-24 color-gray-light">{{ ProductInfo.Description }}</div>
				</div>
			</div>
			<!-- 商品简介 -->
			<!--<productIntro v-if="flag" :data="Data" @changeFavState="changeFavState" @share="share" :storeId="storeId"/>-->

			<!-- 商品标签 -->
			<!--<productTag v-show="ProductInfo&&ProductInfo.TagsList&&ProductInfo.TagsList.length>0" :tag-list="ProductInfo.TagsList" />-->

			<!-- 运费 -->
			<productFreight :data="Data" />

			<!-- 促销、配送 -->
			<div v-show="Data.PolicyList && Data.PolicyList.length > 0" class="product-option mt-10">
				<productOption v-if="Data.PolicyList && Data.PolicyList.length > 0" opt-type="sales"
					:policy-list="Data.PolicyList" />
				<!-- <productOption opt-type="post" :product="ProductInfo" :address="UserAddress" @changeAddress="changeAddress" /> -->
			</div>

			<!--参数、规格 -->
			<div v-show="(ProductInfo.AttrList && ProductInfo.AttrList.length > 0) || ProductInfo.ParamerValue"
				class="product-option mt-10">
				<productOption v-if="ProductInfo.AttrList && ProductInfo.AttrList.length > 0" opt-type="attr"
					:attr-list="ProductInfo.AttrList" :product="ProductInfo" @showOpt="showSpec" />
				<productOption v-if="ProductInfo.ParamerValue" opt-type="param" :product="ProductInfo" />
			</div>

			<!-- 评价模块 -->
			<productEvaluate :data="evaluateData" :product-id="ProductID" />
		</div>
		<!-- 详情模块 -->
		<div class="product-detail mt-10">
			<p class="product-detail-tle fw-b">商品详情</p>
			<div v-show="ProductInfo.ProductDescription" class="pt-15" v-html="ProductInfo.ProductDescription" />
		</div>

		<!-- 底部栏 -->
		<div class="fixed-bottom flex-s-c bottom-box ht plr-50">

			<div class="flex-s-c">
				<div class="mr-30" @click="goHome" style="width: 30px;">
					<img src="../../assets/images/sec_home.png" />
					<p>首页</p>
				</div>

				<div style="width: 30px;">
					<a :href="'tel:' + tel">
						<img src="../../assets/images/sec_service.png" />
						<p>客服</p>
					</a>
				</div>
			</div>
			<div
				v-if="ProductInfo.RemainQty > 0 && Date.parse(ProductInfo.EndTime) > new Date() && Date.parse(ProductInfo.StartTime) < new Date()"
				class="right-btn color-white buynow" @click="showSpec">立即购买</div>
			<div v-if="ProductInfo.RemainQty <= 0" class="end-btn right-btn">商品已售罄</div>
			<div v-if="ProductInfo.RemainQty > 0 && Date.parse(ProductInfo.StartTime) > new Date()" class="end-btn right-btn">
				秒杀未开始</div>
			<div v-if="ProductInfo.RemainQty > 0 && Date.parse(ProductInfo.EndTime) < new Date()" class="end-btn right-btn">
				活动已结束</div>
		</div>
		<!-- 规格弹窗 -->
		<van-popup v-model="popupData.show" position="bottom" class="bottom-popup" @closed="closePopup">
			<ProductSpec :data="popupData.data" :requestData="requestData" :storeId="storeId" :switch203="switch203"
				:ActivityData="ProductInfo" :GradeId="userData.GradeId" :ActivityType="ActivityType" :popup-type="popupData.type"
				page-type="detail" @closePopup="closePopup" @buyNow="buyNow" />
		</van-popup>
		<div v-show="shareData.show" class="dialog-box">
			<div class="dialog-shadow" @click="shareData.show = false" />
			<div class="dialog-content">
				<productShare :detail-data="Data" :isSeckill="isSeckill" :storeId="storeId" :change-img="shareData.show" />
			</div>
		</div>
	</div>
</template>

<script>
import { GetBusinessFunction } from 'api/businessSetting'
import productHead from 'components/productDetail/head'
import productIntro from 'components/productDetail/introduction'
import productTag from 'components/productDetail/tag'
import productFreight from 'components/productDetail/freight'
import productOption from 'components/productDetail/option'
import productEvaluate from 'components/productDetail/evaluate'
//import ProductSpec from 'components/productDetail/spec'
import ProductSpec from 'components/productDetail/seckillSpec'

import { getInitWebInfo } from 'api/web'
import productShare from 'components/productDetail/share'
import { GetCommentListByProduct, AddProductToFavorite, GetProductShareImage } from 'api/product'
import { GetUserDetail } from 'api/member'
import { GetSeckillPageDataInfo, GetNowTime } from 'api/activity'
export default {
	components: {
		productHead,
		productIntro,
		productTag,
		productFreight,
		productOption,
		productEvaluate,
		ProductSpec,
		productShare
	},
	data() {
		return {
			// 头部数据
			scrollTop: 0,
			tel: '',

			Data: {},
			ProductInfo: {},
			ActivityData: {},

			evaluateData: {},
			ProductID: 0,

			// sku 商品规格弹窗
			popupData: {
				data: {},
				type: 'sku',
				show: false
			},
			cartRequestList: [],
			commentRequest: {
				page: 1,
				size: 10
			},
			ActivityType: 0,
			userData: {},
			switch203: 0,
			switch85: 0, // 1-成功 0-失败 2-未登陆
			switch7: 0, // 微商下单不限制库存
			storeId: "",
			shareData: {
				show: false,
				showConfirmButton: false
			},
			isAble: true,
			isFavorite: '',
			showPayTime: false,
			showStartTime: false, //活动未开始
			remainder: '',
			totalAmount: 1,
			HomeIndex: '',
			activityId: 0,
			speed: 0,
			nowTime: null,
			isRefresh: false,
			requestData: {},
			isSeckill: true, //分享二维码跳是否转秒杀详情
			flag: false,
			VideoUrl: '',
			ThumbnailUrl410: '',
		}
	},
	created() {
		console.log(this.$route.params)
		let storeId = sessionStorage.getItem('nav_store_id');
		this.activityId = this.$route.params.id
		this.requestData.activityId = this.$route.params.id
		this.GetUserDetail()
		this.GetSeckillPageDataInfo()
		this.GetCommentListByProduct()
		this.GetBusinessFunction()
		this.setInterval()
		this.getInitWebInfo()
	},
	mounted() {
		this.$nextTick(function () {
			window.addEventListener('scroll', this.onScroll)
		})
	},
	methods: {
		getInitWebInfo() {
			getInitWebInfo().then(res => {
				if (res) {
					this.HomeIndex = res.Data.HomeIndex
				}
			})
		},

		setInterval() {
			var that = this;
			//当前时间
			GetNowTime().then(rsp => {
				if (rsp.State == 1) {
					that.nowTime = new Date(rsp.Data.replace(/-/g, '/')).getTime();
					that.interval = setInterval(e => {
						that.nowTime += 1000;
						var startDiff = new Date(this.ProductInfo.StartTime.replace(/-/g, '/')).getTime() - this.nowTime; //时间差的毫秒数
						var diff = new Date(this.ProductInfo.EndTime.replace(/-/g, '/')).getTime() - this.nowTime; //时间差的毫秒数
						if (diff <= 0) {
							clearInterval(that.interval)
							return
						}
						if (startDiff > 0) {
							that.setCountDown1(1);
						} else {
							that.setCountDown1(2);
						}
					}, 1000)
				}
			})
		},
		//秒杀设置倒计时
		setCountDown1(type) {
			//type=1 显示距开始时间  type=2显示还剩时间
			var time = ''
			if (type === 1) {
				this.showStartTime = true
				if (!this.nowTime || !this.ProductInfo.StartTime) {
					return;
				}
				time = this.ProductInfo.StartTime
			} else {
				this.showPayTime = true
				if (!this.nowTime || !this.ProductInfo.EndTime) {
					return;
				}
				time = this.ProductInfo.EndTime
			}

			var diff = new Date(time.replace(/-/g, '/')).getTime() - this.nowTime;   //时间差的毫秒数
			if (diff < 0) {
				diff = new Date(time.replace(/-/g, '/')).getTime() - this.nowTime;   //时间差的毫秒数
			}
			if (diff >= 0) {
				//计算出相差天数
				var days = Math.floor(diff / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = diff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				var d = (days > 9 ? "" : "0") + days
				var h = (hours > 9 ? "" : "0") + hours
				var paym = (minutes > 9 ? "" : "0") + minutes
				var pays = (seconds > 9 ? "" : "0") + seconds
				if (d > 0) {
					this.remainder = d + '天' + h + ':' + paym + ':' + pays + ''
				}
				else if (h > 0) {
					this.remainder = h + ':' + paym + ':' + pays + ''
				}
				else if (paym > 0) {
					this.remainder = paym + ':' + pays + ''
				}
				else if (pays > 0) {
					this.remainder = pays + '秒'
				}
			} else {
				this.showPayTime = false
				this.showStartTime = false
				this.remainder = ''
			}
		},
		// 收藏/取消收藏
		changeFavState() {
			if (this.isAble) {
				const _obj = {}
				_obj.productId = this.ProductInfo.ProductId
				_obj.isCancel = this.isFavorite === 1
				this.isAble = false
				this.AddProductToFavorite(_obj)
			}
		},
		// 调用收藏/取消收藏接口
		AddProductToFavorite(obj) {
			AddProductToFavorite(obj).then(res => {
				if (res) {
					this.$toast.success(res.Msg)
					this.isFavorite = this.isFavorite === 1 ? 0 : 1
					this.isAble = true
				}
			})
		},
		GetBusinessFunction() {
			GetBusinessFunction(203).then(res => {
				if (res) {
					this.switch203 = res.Data[0].Value;
				}
			})
			GetBusinessFunction(85).then(res => {
				if (res) {
					this.switch85 = res.Data[0].Value;
				}
			})
			GetBusinessFunction(7).then(res => {
				if (res) {
					this.switch7 = res.Data[0].Value;
				}
			})
		},
		GetSeckillPageDataInfo() {
			const obj = {}
			obj.activityId = this.activityId
			GetSeckillPageDataInfo(obj).then(res => {
				if (res.Data) {
					const data = res.Data
					this.Data = data.Info
					this.flag = true
					this.ProductInfo = data.Info
					this.isFavorite = data.IsFav
					this.tel = data.ServiceTel
					this.ThumbnailUrl410 = data.ThumbnailUrl410
					if (data.Info.StoreId > 0) {
						this.requestData.storeId = data.Info.StoreId
						this.requestData.isStore = 1
					}
					if (data.Info.Quantity !== 0 && data.Info.UseQty <= data.Info.Quantity) {
						this.speed = parseInt(((data.Info.UseQty / data.Info.Quantity) * 100))
					} else {
						this.speed = 100
					}
					this.changeArr(this.ProductInfo)
					data.Info.MarkePrice = data.Info.OriginalPrice
					data.Info.V_GradePrice = data.Info.Price
					this.ProductInfo.logo = data.Info.ProductImage
					this.Data.ProductInfo = data.Info
					if (data.Info.AttrList.length > 0) {
						this.ProductInfo.ProductSkuAttrList = data.Info.AttrList
					}
					if (data.Info.ProductImages) {
						this.Data.imgList = data.Info.ProductImages.split(',')
					}
					if (data.Info.VideoUrl) {
						this.VideoUrl = data.Info.VideoUrl
					}
				}
			})
		},
		// 商品、详情切换
		changeDetail(index) {
			console.log(index)
			// 加入锚点
			let height = 0
			switch (index) {
				case 0:
					height = 0
					break
				case 1:
					height = this.$refs.info.offsetHeight - 88
					break
			}
			// 这里需要搞一个滚动过渡动画
			// document.documentElement.scrollTop = height
			this.$utils.animateScrollTop(height)
		},
		clickLeft() {
			console.log(localStorage.getItem('storeId'), "Mend")
			if (localStorage.getItem('storeId')) {
				window.location.href = this.$LocalDomain + '/circle/#/seckillList/1?storeId=' + localStorage.getItem('storeId')
			} else {
				this.$utils.back(this.$route.path)
			}
		},


		showSpec(ActivityType) {
			//if(ActivityType){
			//  this.ActivityType = ActivityType
			//}
			console.log(this.requestData, '购买')
			this.popupData.data = this.ProductInfo
			this.popupData.show = true
		},
		closePopup() {
			console.log('guanbi')
			this.popupData.show = false
			this.ActivityType = 0
		},

		buyNow(arr) {
			console.log(arr)
			this.cartRequestList = arr
			// this.AddOrUpdateAmount()
		},
		// 调用分享弹窗
		share() {
			console.log(this.Data, "组件传参")
			this.shareData.show = true
		},



		// 滚动事件触发下拉加载
		onScroll() {
			this.scrollTop = this.$utils.getScrollTop()
		},



		// 整理数据
		changeArr(item, isNew) {
			const _this = this
			console.log(this)
			// 图片列表

			item.BaseUnit = item.DefaultUnit
			// 单位列表
			if (item.Unit && item.Unit.indexOf(',') !== -1) {
				item.UnitList = item.Unit.split(',')
				item.BaseUnit = item.UnitList[0]
			}
			// 换算比例列表
			if (item.Unitratio && item.Unitratio.indexOf(':') !== -1) {
				item.UnitratioList = item.Unitratio.split(':')
			}
			// 按单限购
			if (item.ProductSkuList && item.ProductSkuList.length === 1) {
				item.oLimitBuy = item.ProductSkuList[0].LimitBuy
			}
		},

		GetCommentListByProduct() {
			this.commentRequest.product_id = this.ProductInfo.ID
			GetCommentListByProduct(this.commentRequest).then(res => {
				if (res) {
					console.log(res)
					this.evaluateData = res.Data
				}
			})
		},


		//会员详情信息
		GetUserDetail() {
			GetUserDetail().then(res => {
				if (res) {
					setTimeout(() => {
						this.userData = res.Data
						this.Data.Images = res.Data.Images
						this.Data.NickName = res.Data.NickName
					}, 200)
				}
			})
		},
		gotoSupplier() {
			if (this.Data.SupplierInfo.ShopUserStoreId > 0) {
				this.$router.push('/businessDetail/' + this.Data.SupplierInfo.ShopUserStoreId)
			} else {
				window.location.href = "/m/supplier/supplierhome?id=" + this.ProductInfo.SupplierId;
			}
		},

		goHome() {
			if (this.storeId) {
				window.location.href = this.$LocalDomain + '/m/retail/RetailPage?store_id=' + this.storeId
			} else {
				window.location.href = this.$LocalDomain + this.HomeIndex
			}
		},
	}
}
</script>
<style lang="scss" scoped>
// 详情
.product-detail {
	background: $colorF;
	padding: 16px 0;

	.product-detail-tle {
		padding: 0 32px;
		font-size: 30px;
		line-height: 1;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			width: 6px;
			border-radius: 3px;
			height: 30px;
			@include bg-primary;
			top: 0px;
			left: 15px;
		}
	}
}

.product-option {
	background: $colorF;
	padding: 25px 32px;
}

.bottom-popup {
	border-radius: 40px 40px 0 0;
}

.sectitle {
	height: 136px;
	background: linear-gradient(135deg, #FE8224 0%, #FE643E 52%, #FE633F 54%, #F7405C 100%);
	display: flex;
	justify-content: space-around;
	padding: 0 16px;
}

.originprice {
	text-decoration: line-through;
}

.secprice {
	background: linear-gradient(134deg, #FE8224 0%, #FE7E7B 51%, #FE524D 100%, 0.69);
	//opacity: 0.69;
	width: 346px;
	color: #fff;
}

.progress {
	width: 100%;
	display: flex;
	align-items: center;
	color: #fff;
}

.w-110 {
	width: 220px;
}

.secclock {
	width: 116px;
}

.sectime {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;

	img {
		width: 126px;
		height: 26px;
	}
}

.specall {
	display: inline-flex;
}

.spec {
	background: #FEF8E1;
	border-radius: 10px;
	color: #FE8000;
	text-align: center;
	font-size: 26px;
	margin-right: 15px;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
}

.like {
	position: absolute;
	right: 0px;
	top: 10px;
}

.share-btn {
	position: absolute;
	right: -24px;
	top: 0;
	font-weight: normal;
	font-size: 24px;
	padding: 10px 16px;

	&:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 27px 0 0 27px;
		background: currentColor;
		opacity: 0.05;
	}

	img {
		width: 32px;
	}
}

// 弹窗部分样式
.dialog-box {
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 2016;

	.dialog-shadow {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
	}

	.dialog-content {
		position: relative;
		width: 640px;
		margin: 200px auto;
		border-radius: 8px;
		overflow: hidden;
	}
}

.bottom-box {
	background: $colorF;
	height: 130px;
	z-index: 2;

	.shop-cart-out {
		border-radius: 100%;
		left: 54px;
		top: -20px;
		overflow: visible;

		.shop-cart-in {
			border-radius: 100%;
			left: 6px;
			top: 6px;
			overflow: visible;

			.shop-cart-num {
				font-size: 22px;
				line-height: 30px;
				padding: 0 10px;
				border-radius: 15px;
				color: $colorF;
				background: $red;
				top: 0;
				left: 60px;
				z-index: 12;
			}
		}
	}

	.shop-cart-out2 {
		left: 54px;
		overflow: visible;

		.shop-cart-in {
			left: 6px;
			top: 6px;
			overflow: visible;

			.shop-cart-num {
				font-size: 22px;
				line-height: 30px;
				padding: 0 8px;
				border-radius: 50px;
				color: $colorF;
				background: #FE5128;
				top: 0;
				left: 60px;
				z-index: 12;
			}
		}
	}

	.btn {
		position: absolute;
		right: 23px;
		top: 25px;
		width: 220px;
		line-height: 80px;
		border-radius: 40px;
		text-align: center;
	}

	.cart-num {
		position: absolute;
		font-size: 18px;
		line-height: 20px;
		padding: 0 5px;
		border-radius: 10px;
		color: $colorF;
		@include bg-primary;
		top: -5px;
		left: 36px;
		z-index: 12;
	}

	.right-btn {
		width: 480px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		border-radius: 44px;
		font-size: 34px;
	}

	.end-btn {
		background: #b8b8b8;
		color: #fff;
	}
}

.mh-30 {
	min-height: 30px;
}

.buynow {
	background: linear-gradient(135deg, #FE8224 0%, #FE643E 52%, #FE633F 54%);
}

.ht img {
	width: 85% !important;
	height: 85% !important;
}
</style>
